<template>
  <div class="home">
      <div class="content">
        <div class="box9">
          <h1>数据大屏可视化</h1>
        </div>
        <div class="box1">
          <dv-border-box-1>
            <dv-conical-column-chart :config="config" wdith="100%" height="100%"  />
          </dv-border-box-1>
        </div>
        <div class="box2">
          <dv-border-box-4>
            <ve-line :data="chartData" height="100%" width="100%"></ve-line>
          </dv-border-box-4>
        </div>
        <div class="box3">
          <dv-border-box-4 :reverse="true">dv-border-box-4</dv-border-box-4>
        </div>
        <div class="box4">
        <dv-border-box-9>dv-border-box-9</dv-border-box-9>
        </div>
        <div class="box5">
         <dv-border-box-10>dv-border-box-10</dv-border-box-10>
        </div>
        <div class="box6">
          <dv-border-box-8>dv-border-box-8</dv-border-box-8>
        </div>
        <div class="box7">
          <dv-border-box-11 title="XXX标题">dv-border-box-11</dv-border-box-11>
        </div>
        <div class="box8">
          <dv-border-box-13>dv-border-box-13</dv-border-box-13>
        </div>
      </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  data(){
    return {
      config:{
        data: [
              {
                name: '周口',
                value: 55
              },
              {
                name: '南阳',
                value: 120
              },
              {
                name: '西峡',
                value: 71
              },
              {
                name: '驻马店',
                value: 66
              },
              {
                name: '新乡',
                value: 80
              },
              {
                name: '信阳',
                value: 35
              },
              {
                name: '漯河',
                value: 15
              }
          ],
      },
       chartData: {
            columns: ['日期', '销售额'],
            rows: [
              { '日期': '1月1日', '销售额': 123 },
              { '日期': '1月2日', '销售额': 1223 },
              { '日期': '1月3日', '销售额': 2123 },
              { '日期': '1月4日', '销售额': 4123 },
              { '日期': '1月5日', '销售额': 3123 },
              { '日期': '1月6日', '销售额': 7123 }
            ]
          }
    }
  },
  name: 'HomeView',
  components: {

  }
}
</script>

<style lang="less" scoped>
    .home{
      background: url("../assets/images/beijin.jpg") center top no-repeat;
      background-size: 100% 100%;
      height: 100%;
      .content{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 5px;
        grid-template-rows: 50px 1fr 1fr 1fr;
        h1{
          text-align: center;
          line-height: 50px;
          color: white;
        }

    }
    }
     .box9{
          grid-column: span 3;
      }
      .box7{
        grid-column: span 2;
      }
</style>
